<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>集群管理</title>
    <script type="text/javascript" src="../anon/js/jquery-1.8.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            font-size: 14px;
        }
        #menu{
            width: 800px;
            overflow: hidden;
            margin: 100px auto;
            border: 1px solid #BF9660;
        }
        #menu #nav{
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #menu #nav li{
            float: left;
            width: 200px;
        }
        #menu #nav li a{
            display: block;
            line-height: 27px;
            text-decoration: none;
            padding: 0 0 0 5px;
            text-align: center;
            color: #333333;
        }
        #menu_con{
            width: auto;
            height: auto;
            border-top: none;
        }
        .tag{
            padding: 10px;
            overflow: hidden;
        }
        .selected{
            background: #CCCCFF;
            color: #FFFFFF;
        }
        button{
            width: 100px;
            height: 30px;
            cursor: pointer;
        }
        input{
            height: 30px;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul id="nav">
        <li><a href="#" class="selected">添加集群</a></li>
        <li><a href="#" class="">集群列表</a></li>
        <li><a href="#" class="">集群详情</a></li>
        <li><a href="#" class="">删除集群</a></li>
    </ul>
    <div id="menu_con">
        <div class="tag" style="display:block">
            <table>
                <tr>
                    <td><h3>集群信息</h3></td>
                </tr>
                <tr>
                    <td>集群名称: </td>
                    <td><input id="name" type="text"/></td>
                </tr>
                <tr>
                    <td>服务地址: </td>
                    <td><input id="api" type="text"/></td>
                </tr>
                <tr>
                    <td>所有者: </td>
                    <td><input id="ownerName" type="text"/></td>
                </tr>
                <tr>
                    <td>所有者类型: </td>
                    <td><input id="ownerType" type="text"/></td>
                </tr>
                <tr>
                    <td><button id="createCluster">创建</button></td>
                </tr>
            </table>
        </div>
        <div class="tag" style="display:none">
            <table>
                <tr>
                    <td><button id="listCluster">获取</button></td>
                </tr>
            </table>
        </div>
        <div class="tag" style="display:none">
            <table>
                <tr>
                    <td>部署Id: </td>
                    <td><input id="clusterId" type="text"/></td>
                </tr>
                <tr>
                    <td><button id="getCluster">获取</button></td>
                </tr>
                <tr>
                    <td>namespace: </td>
                    <td><input id="namespace" type="text"/></td>
                </tr>
                <tr>
                    <td><button id="addNamespace">添加namespace</button></td>
                </tr>
                <tr>
                    <td>node : </td>
                    <td><input id="node" type="text"/></td>
                    <td>label key: </td>
                    <td><input id="labelKey" type="text"/></td>
                    <td>label value: </td>
                    <td><input id="labelValue" type="text"/></td>
                </tr>
                <tr>
                    <td><button id="addLabel">添加label</button></td>
                </tr>
            </table>
        </div>
        <div class="tag" style="display:none">
        </div>
        <div class="tag" style="display:none">
        </div>
        <div class="tag" style="display:none">
        </div>
    </div>
</div>

<script type="application/javascript">
    $(function() {
        $('#createCluster').bind('click', function(event) {
            var name = $('#name').val();
            var api = $('#api').val();
            var ownerName = $('#ownerName').val();
            var ownerType = $('#ownerType').val();
            var data = {
                name: name,
                api: api,
                ownerName: ownerName,
                ownerType: ownerType
            };
            alert(JSON.stringify(data));
            $.ajax({
                type: 'post',
                url: '/api/cluster',
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function() {
                    alert('receive success');
                },
                error: function() {
                    alert('receive error');
                }
            });
        });
    });
    $(function() {
        $('#listCluster').bind('click', function(event) {
            $.ajax({
                type: 'get',
                url: "/api/cluster",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function(result) {
                    console.log(JSON.stringify(result));
                    $('#listCluster').after('<p>'+JSON.stringify(result)+'</p>');
                },
                erroe: function() {
                    alert('send error');
                }
            });
        });
    });
    $(function() {
        $('#getCluster').bind('click', function(event) {
            $.ajax({
                type: 'get',
                url: "/api/cluster/" + $('#clusterId').val(),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function(result) {
                    console.log(JSON.stringify(result));
                    $('#getCluster').after('<p>'+JSON.stringify(result)+'</p>');
                },
                erroe: function() {
                    alert('send error');
                }
            });
        });
    });
    $(function() {
        $('#addNamespace').bind('click', function(event) {
            var namespace = [
                $('#namespace').val()
            ];
            $.ajax({
                type: 'post',
                url: "/api/cluster/" + $('#clusterId').val() + "/namespace",
                data: JSON.stringify(namespace),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function(result) {
                    console.log(JSON.stringify(result));
                    $('#addNamespace').after('<p>'+JSON.stringify(result)+'</p>');
                },
                erroe: function() {
                    alert('send error');
                }
            });
        });
    });
    $(function() {
        $('#addLabel').bind('click', function(event) {
            var node = $('node').val();
            var key = $('labelKey').val();
            var value = $('labelValue').val();
            var labels = new Map();
            labels.put(key, value);
            var nodeLabel = {
                node : node,
                labels : labels
            };
            $.ajax({
                type: 'post',
                url: "/api/cluster/" + $('#clusterId').val() + "/nodelabels",
                data: JSON.stringify(nodeLabel),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function(result) {
                    console.log(JSON.stringify(result));
                    $('#addNamespace').after('<p>'+JSON.stringify(result)+'</p>');
                },
                erroe: function() {
                    alert('send error');
                }
            });
        });
    });
</script>

<script>
    var tabs = function() {
        function tag(name, elem) {
            return (elem || document).getElementsByTagName(name);
        }
        function id(name) {
            return document.getElementById(name);
        }
        function first(elem) {
            elem = elem.firstChild;
            return elem && elem.nodeType == 1 ? elem : next(elem);
        }
        function next(elem) {
            do {
                elem = elem.nextSibling;
            } while(elem && elem.nodeType != 1)
            return elem;
        }
        return {
            set:function(elemId, tabId) {
                var elem = tag("li", id(elemId));
                var tabs = tag("div", id(tabId));
                var listNum = elem.length;
                var tabNum  = tabs.length;
                for(var i=0; i<listNum; i++) {
                    elem[i].onclick = (function(i) {
                        return function() {
                            for(var j=0; j<tabNum; j++) {
                                if(i==j) {
                                    tabs[j].style.display = "block";
                                    elem[j].firstChild.className = "selected";
                                }
                                else {
                                    tabs[j].style.display = "none";
                                    elem[j].firstChild.className = "";
                                }
                            }
                        }
                    })(i)
                }
            }
        }
    }();
    tabs.set("nav", "menu_con");
</script>
</body>
</html>